<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: ZachGmy
 * @LastEditTime: 2022-06-15 09:50:21
-->
<!-- xxx is not defined -->
<template>
  <div class="realTime">
    <!-- 城市对比折线图 -->
    <!-- calc 在css中如果要有一些运算的处理 放在calc表达式中 -->
    <!-- vh 视窗的高度 -->
    <div id="container" style="height: calc(100vh / 3)"></div>
    <!--柱状图 -->
    <div id="columnar_container" style="height: calc(100vh / 3)"></div>
    <!-- 饼图 -->
    <div id="pie_container" style="height: calc(100vh / 3)"></div>
    

  </div>
</template>

<script>
import axios from 'axios';
export default {
  mounted() {
    // axios({
    //   url: '/mxgApi/epidemic',
    //   method: 'get'
    // }).then(res => {
    //   console.log(res)
    // })
    //柱状图
    Highcharts.chart("columnar_container", {
      chart: {
        type: "line",
      },
      // 标题
      title: {
        text: "城市疫情数据对比",
      },
      // 副标题
      subtitle: {
        text: "数据来源: 广西科技大学",
      },
      xAxis: [{
        categories: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
        crosshair: {
          width: 1,
          color: 'black'
        },
      }],
      yAxis: [{
        title: {
          text: "数量 (个)",
        },
        //十字准星线
        crosshair: {
          width: 1,
          color: 'black',
          snap: true,
        },
      }],
      plotOptions: {
        line: {
          dataLabels: {
            // 开启数据标签
            enabled: true,
          },
          // 关闭鼠标跟踪，对应的提示框、点击事件会失效
          // enableMouseTracking: false,
        },
      },
      // 提示框
      tooltip: {
        headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
        pointFormat:
          '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>',
        shared: true,
      },
      series: [
        {
          name: "北京",
          data: [
            98, 32, 79, 352, 1216, 370
          ],
        },
        {
          name: "上海",
          data: [
            182, 420, 1450, 5189, 890, 152
          ],
        },
      ],
    });
    var chart = Highcharts.chart('container',{
	chart: {
		type: 'column'
	},
	title: {
		text: '今日确诊'
	},
	subtitle: {
		text: '数据来源:广西科技大学'
	},
	xAxis: {
		categories: [
			'北京','上海','山东','内蒙古','广东','福建','浙江','四川','重庆','云南','陕西','哈尔滨'
		],
		crosshair: true
	},
	yAxis: {
		min: 0,
		title: {
			text: '确诊数 (人)'
		}
	},
	tooltip: {
		// head + 每个 point + footer 拼接成完整的 table
		headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		'<td style="padding:0"><b>{point.y:.1f} 人</b></td></tr>',
		footerFormat: '</table>',
		shared: true,
		useHTML: true
	},
	plotOptions: {
		column: {
			borderWidth: 0
		}
	},
	series: [{
		name: '确诊',
		data: [46, 85 , 14, 58, 20, 92, 47, 11, 16, 11, 16,14]
	}]
});
Highcharts.chart('pie_container', {
		chart: {
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false,
				type: 'pie'
		},
		title: {
				text: '城市疫情比例'
		},
		tooltip: {
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
				pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
								enabled: true,
								format: '<b>{point.name}</b>: {point.percentage:.1f} %',
								style: {
										color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
								}
						}
				}
		},
		series: [{
				name: 'Brands',
				colorByPoint: true,
				data: [{
						name: '北京',//46
						y: 11.64,
						sliced: true,
						selected: true
				}, {
						name: '上海',
						y: 21.25
				}, {
						name: '山东',
						y: 3.54
				}, {
						name: '内蒙古',
						y: 14.68
				}, {
						name: '广东',
						y: 5.06
				}, {
						name: '福建',
						y: 23.29
				}, {
						name: '浙江',
						y: 11.90
				}, {
						name: '四川',
						y: 4.3
				}, {
						name: '重庆',
						y: 4.1
				}]
		}]
});

    
  },
};
</script>

<style scoped>
</style>
